<template>
	<view class="content">
		<view class="search">
			<uni-easyinput placeholder-style="color:#007aff" v-model="uname" placeholder="模糊查询用户"></uni-easyinput>
			<button type="primary" @click="searchUser" size="default">搜索</button>
		</view>
		<uni-list>
			<uni-list-item v-for="item in userList">
				<template v-slot:header>
					<view >
						<image class="imgV" :src="item.avatar" mode="scaleToFill"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="txt1" style="width: 260px;flex-direction: column;margin-left: 10px;">
						<text class="txt1-1">{{item.userName}}</text>
						<text class="txt1-2">{{item.perSign}}</text>
					</view>
				</template>
				<template v-slot:footer>
					<uni-icons @click="addfriend(item)" type="plus-filled" color="#007aff" size="30" />
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import {queryUser,addfriend1} from '../../service/index.js'
	export default {
		data() {
			return {
				uname:'',
				userList:[]
			}
		},
		methods: {
			async searchUser(){
				let data=await queryUser(this.uname)
				//console.log(data)
				this.userList=data.data
			},
			async addfriend(i){
				//console.log(i)
				let data =await addfriend1(i.userName,i.avatar,i.perSign)
				//console.log(data)
				if(data.code==402){
					uni.showToast({
						title:'已经存在该好友',
						duration:2000,
						icon:'error'
					})
				}
				if(data.code==200){
					uni.showToast({
						title:'添加好友成功',
						duration:2000,
						icon:'success'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search{
		border: 1px solid blue;
		padding: 15px;
		border-radius: 50px;
		margin: 10px;
	}
	.imgV{
		width: 40px;
		height: 40px;
	}
	
	.txt1{
		justify-content: space-around;
		>.txt1-1{
			font-size: $uni-font-size-title;
			font-weight: bold;
			color: $uni-color-primary;
		}
		>.txt1-2{
			font-size: $uni-font-size-base;
			color: $uni-color-warning;
		}
	}
</style>
